<template>
  <div class="className">
    <el-card>
      <div slot="header">
        <span>{{ $t("slider.会员管理") }}</span>
        <el-button class="ml-20" size="mini" @click="dialogSearch.show = true"
          >搜索</el-button
        >
      </div>
      <my-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :cellStyle="{ padding: '6px 0' }"
        :headerCellStyle="{ background: '#3a3f51', color: '#fff' }"
        @currentChange="currentChange"
      >
      </my-table>
    </el-card>
    <el-dialog
      :title="dialogSearch.title"
      append-to-body
      :visible.sync="dialogSearch.show"
      :close-on-click-modal="false"
      width="550px"
    >
      <form-page
        :ref-obj.sync="formSearch.ref"
        :data="formSearch.data"
        :field-list="formSearch.fieldList"
        :rules="formSearch.rules"
        :label-width="formSearch.labelWidth"
        :list-type-info="listTypeInfo"
      >
      </form-page>
      <span slot="footer">
        <el-button size="small" @click="resetForm">重置</el-button>
        <el-button
          size="small"
          type="primary"
          @click="search"
          :loading="but_loading"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMember } from "@s/api";
import myTable from "@c/common/Table/index";
import FormPage from "@c/common/FormPage/index";
import { getTableData } from "@/mixins";

export default {
  data() {
    return {
      columns: [
        {
          label: "ID",
          width: 50,
          prop: "id"
        },
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "电话号码",
          prop: "phone"
        },
        {
          label: "部门",
          prop: "branch"
        },
        {
          label: "生日",
          prop: "birthday"
        },
        {
          label: "注册日",
          prop: "register_date"
        },
        {
          label: "注册许可日",
          prop: "register_agree_date"
        },
        {
          label: "最后登陆日",
          prop: "last_login_date"
        },
        {
          label: "操作",
          prop: "",
          width: 120,
          align: "left",
          slot: "operation"
        }
      ],
      listTypeInfo: {
        branchList: [
          {
            value: 1,
            label: "张"
          },
          {
            value: 2,
            label: "刘"
          },
          {
            value: 3,
            label: "李"
          }
        ]
      },
      formSearch: {
        ref: null,
        data: {
          name: null,
          phone: null,
          branch: null,
          startTime: null,
          endTime: null
        },
        fieldList: [
          {
            value: "name",
            label: "姓名",
            width: "285",
            type: "input",
            className: "el-form-block"
          },
          {
            value: "phone",
            label: "电话",
            width: "285",
            type: "input",
            className: "el-form-block"
          },
          {
            value: "branch",
            label: "部门",
            width: "285",
            type: "select",
            list: "branchList",
            className: "el-form-block"
          },
          {
            value: ["startTime", "endTime"],
            label: "部门",
            width: "285",
            type: "daterange",
            className: "el-form-block"
          }
        ],
        rules: {},
        labelWidth: "130px"
      }
    };
  },
  components: {
    myTable,
    FormPage
  },
  mixins: [getTableData(getMember)],
  created() {},
  methods: {}
};
</script>
